import EntityIcon from '@/components/Common/GlobalComps/entityIcon';
import { model, schema } from '@/ts/base';
import { IMallTemplate } from '@/ts/core/thing/standard/page/mallTemplate';
import { ShoppingCartOutlined } from '@ant-design/icons';
import { Carousel, Image, Skeleton, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import cls from './../index.module.less';
import down from '/public/img/mallTemplate/down.svg';
import DataDetails from '../components/dataDetails';

interface IProps {
  current: IMallTemplate;
  product: schema.XProduct;
}

const images = (product: schema.XProduct): model.FileItemShare[] => {
  let key = 'images';
  switch (product.mode) {
    case '共享':
      key = 'icons';
      break;
  }
  const images = JSON.parse(product[key] || '[]');
  if (images.length == 0) {
    images.push({} as model.FileItemShare);
  }
  return images;
};

export const Product: React.FC<IProps> = ({ current, product }) => {
  const [center, setCenter] = useState(<></>);
  const [staging, setStaging] = useState(
    current.shoppingCar.products.some((a) => a.id == product.id),
  );
  useEffect(() => {
    const id = current.shoppingCar.subscribe(() => {
      setStaging(current.shoppingCar.products.some((a) => a.id == product.id));
    });
    return () => current.shoppingCar.unsubscribe(id);
  }, []);
  const loadBody = () => {
    switch (product.mode) {
      case '共享':
        return (
          <div key={product.id} className={cls.listItem} style={{ padding: 0 }}>
            <div
              className={cls.detail}
              onClick={() =>
                setCenter(
                  <DataDetails
                    data={product}
                    current={current}
                    onCancel={() => setCenter(<></>)}
                  />,
                )
              }>
              <div>
                {images(product).map((item, index) => {
                  return (
                    <Image
                      key={index}
                      src={item.shareLink}
                      preview={false}
                      style={{
                        borderRadius: '2px',
                        width: '23px',
                        height: '23px',
                        marginRight: '6px',
                      }}
                    />
                  );
                })}
                {product.title ?? '[未设置名称]'}
              </div>
              <div className={cls.productInfo}>
                <Space size={8} direction="vertical">
                  <div className={cls.introduce}>{product.remark}</div>
                  {current.metadata.mode === 'sharing' && (
                    <>
                      <div>
                        供给方：
                        <EntityIcon entityId={product.belongId} showName />
                      </div>
                      <div>上架时间：{product.updateTime}</div>
                    </>
                  )}
                </Space>
              </div>
            </div>
            <div className={cls.footer}>
              {current.metadata.mode !== 'sharing' && (
                <div className={cls.purchaseInfo}>
                  <span className={cls.price}>￥{product.price || 0}</span>
                  <span className={cls.buyersNum}>{0}人已买</span>
                </div>
              )}
              <div className={cls.purchaseControls}>
                <div className={cls.purchaseNow}>
                  <img src={down}></img>
                  <span className={cls.purchase}>
                    {current.metadata.mode !== 'sharing' ? '立即购买' : '立即申领'}
                  </span>
                </div>
                <div className={cls.purchaseCar}>
                  <ShoppingCartOutlined
                    onClick={() => {
                      if (staging) {
                        current.shoppingCar.remove(product);
                      } else {
                        current.shoppingCar.create(product);
                      }
                    }}
                    style={{
                      fontSize: 20,
                      color: staging ? 'red' : undefined,
                    }}
                  />
                  {current.metadata.mode === 'sharing' && (
                    <span className={cls.purchase}>加入购物车</span>
                  )}
                </div>
              </div>
            </div>
          </div>
        );
      default:
        return (
          <div key={product.id} className={cls.listItem} style={{ padding: 0 }}>
            <div
              className={cls.detail}
              onClick={() =>
                setCenter(
                  <DataDetails
                    current={current}
                    data={product}
                    onCancel={() => setCenter(<></>)}
                  />,
                )
              }>
              <Carousel autoplay={true}>
                {images(product).map((item, index) => {
                  return (
                    <Image
                      key={index}
                      width={'100%'}
                      src={item.shareLink}
                      preview={false}
                      className={cls.productImg}
                      placeholder={<Skeleton.Image className={cls.productImg} />}
                    />
                  );
                })}
              </Carousel>
              <div className={cls.productInfo}>
                <Space size={8} direction="vertical">
                  <div className={cls.title}>
                    {product.brand && `[${product.brand}]`}
                    {product.title || '【暂无标题】'}
                  </div>
                  <div>
                    供给方：
                    <EntityIcon entityId={product.belongId} showName />
                  </div>
                  <div>上架时间：{product.updateTime}</div>
                </Space>
              </div>
            </div>
            <div className={cls.footer}>
              {current.metadata.mode !== 'sharing' && (
                <div className={cls.purchaseInfo}>
                  <div className={cls.price}>￥{product.price ?? 0}</div>
                  <div className={cls.buyersNum}>{0}人已买</div>
                </div>
              )}
              <div className={cls.purchaseControls}>
                <div className={cls.purchaseNow} onClick={() => {}}>
                  <img src={down}></img>
                  <span className={cls.purchase}>
                    {current.metadata.mode !== 'sharing' ? '立即购买' : '立即申领'}
                  </span>
                </div>
                <div className={cls.purchaseCar}>
                  <ShoppingCartOutlined
                    onClick={() => {
                      if (staging) {
                        current.shoppingCar.remove(product);
                      } else {
                        current.shoppingCar.create(product);
                      }
                    }}
                    style={{
                      fontSize: 20,
                      color: staging ? 'red' : undefined,
                    }}
                  />
                  {current.metadata.mode === 'sharing' && (
                    <span className={cls.purchase}>加入购物车</span>
                  )}
                </div>
              </div>
            </div>
          </div>
        );
    }
  };
  return (
    <>
      {loadBody()}
      {center}
    </>
  );
};
